import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.BoxWithConstraints
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.widthIn
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun MyResponsiveBox() {
    BoxWithConstraints {
        // 获取当前BoxWithConstraints的宽度和高度约束
        val maxWidth = maxWidth.value.dp
//        val _minHeight = minHeight.value.dp

        // 创建一个子组件，其宽度最大为其父容器宽度的一半
        Box(
            modifier = Modifier
                .fillMaxSize() // 填充整个BoxWithConstraints的大小（可选，取决于你的需求）
                .then(Modifier.widthIn(max = maxWidth * 0.5f)) // 宽度为其父容器宽度的一半
        ) {
            // 在这里添加你的内容，比如文本、图片等
            // 例如，添加一个文本组件
            Text("这是一个响应式布局的Box", modifier = Modifier.padding(16.dp))
        }

        // 你可以继续添加其他子组件，并根据需要设置它们的布局和样式
    }
}

// 在你的Activity或Fragment中调用这个函数来显示这个响应式布局的Box
// 例如，在setContent中调用它：
// setContent {
//     MyResponsiveBox()
// }